<template>
  <!-- :close-on-click-modal="false"  点击其他地方不关闭弹窗 -->
  <el-dialog :title="title" :visible.sync="visible" :width="width" :top="top" :close-on-click-modal="false" :before-close="handleClose" :shutEvent="shutEvent" @close="closeevent" :append-to-body="appendToBody" class="page-dialog" :class="className">
    <slot />
    <div v-if="btList" slot="footer" class="dialog-footer">
      <template v-for="(item, index) in getConfigList()">
        <el-button v-if="item.show && item.event !== 'close'" :key="index" :type="item.type || ''" :icon="item.icon" :disabled="item.disabled" :loading="btLoading"  @click="handleClick(item.event)">
          {{ item.label }}
        </el-button>
        <el-button v-if="item.show && item.event == 'close'" :key="index" :icon="item.icon" :disabled="item.disabled" :type="item.type || ''" :loading="btLoading_"  @click="handleCloseClick(item.event)">
          {{ item.label }}
        </el-button>
      </template>
    </div>
  </el-dialog>
</template>

<script>
import { throttle } from "lodash";
export default {
  name: "PageDialog",
  props: {
    // 自定义类名
    className: {
      type: String
    },
    top: {
      type: String,
      default: "5vh"
    },
    // 弹窗标题
    title: {
      type: String
    },
    // 弹窗是否显示
    visible: {
      type: Boolean,
      default: false
    },
    // 弹窗宽度
    width: {
      type: String
    },
    // 按钮加载
    btLoading: {
      type: Boolean
    },
    // 按钮加载
    btLoading_: {
      type: Boolean,
      default: false
    },
    // 操作栏配置
    btList: {
      type: Array
    },
    // 插入到body
    appendToBody: {
      type: Boolean,
      default: true
    },
  // 弹窗关闭事件
    shutEvent: {
      type: String
    },
  },
  data () {
    return {};
  },
  watch: {
    visible (val) {
      this.$emit("update:visible", val);
    }
  },
  methods: {
    // 获取按钮列表
    getConfigList () {
      return this.btList.filter(item => {
        return (
          !item.hasOwnProperty("show") ||
          (item.hasOwnProperty("show") && item.show)
        );
      });
    },
    // 绑定的相关事件
    handleEvent (evnet) {
      this.$emit("handleEvent", evnet);
    },
    // 派发按钮点击事件
    handleClick: throttle(
      function (event, data) {
        this.$emit("handleClick", event, data);
      },
      2000,
      { trailing: false }
    ),
    handleCloseClick (event) {
      this.$emit("handleClick", event);
    },
    //关闭事件
    closeevent (event, data) {
    if(this.shutEvent){
       this.$emit("handleClick", this.shutEvent);
    }else{
      this.$emit("closeevent", event, data);
    }
  },
    // 关闭弹窗前的回调
    handleClose (done) {
      this.$emit("update:visible", false);
    }
  }
};
</script>

<style lang="scss">
.page-dialog {
  .el-dialog__header {
    background: #f6f7fc;
  }
}
</style>
<style lang="scss" scoped>
::v-deep .el-dialog {
  margin-top: 3vh !important;
}
::v-deep.el-dialog__body {
  font-size: 12px !important;
  padding: 10px 20px !important;
}
::v-deep.el-dialog__header {
  padding: 10px !important;
}
::v-deep .el-dialog__header > .el-dialog__title {
  font-size: 14px !important;
}
::v-deep .dialog-footer > .el-button {
  font-size: 12px !important;
}
::v-deep .el-dialog__headerbtn {
  top: 15px !important;
}
::v-deep .el-checkbox__label {
  font-size: 12px !important;
}
::v-deep .el-radio-group > .el-radio > .el-radio__label {
  font-size: 12px !important;
}
::v-deep .el-form > .el-row > .el-col > .el-form-item > .el-form-item__label {
  font-size: 12px !important;
  padding: 0px !important;
}
::v-deep .el-form > .el-row > .el-form-item > .el-form-item__label {
  font-size: 12px !important;
  padding: 0px !important;
}
::v-deep .el-form > .el-form-item > .el-form-item__content {
  font-size: 12px !important;
}
::v-deep .el-form > .el-row > .el-form-item > .el-form-item__content {
  font-size: 12px !important;
}
::v-deep .el-form > .el-row > .el-col > .el-form-item > .el-form-item__content {
  font-size: 12px !important;
}
::v-deep .el-form > .el-form-item > .el-form-item__label {
  font-size: 12px !important;
  padding: 0px !important;
}
::v-deep .el-form > .el-row > .el-form-item > .el-form-item__label {
  font-size: 12px !important;
  padding: 0px !important;
}
::v-deep .el-form > .el-form-item > .el-form-item__content > .el-input {
  font-size: 12px !important;
  height: 30px !important;
}
::v-deep
  .el-form
  > .el-row
  > .el-form-item
  > .el-form-item__content
  > .el-input {
  font-size: 12px !important;
  height: 30px !important;
}
::v-deep
  .el-form
  > .el-row
  > .el-col
  > .el-form-item
  > .el-form-item__content
  > .el-input {
  font-size: 12px !important;
  height: 30px !important;
}
::v-deep
  .el-form
  > .el-row
  > .el-form-item
  > .el-form-item__content
  > .el-autocomplete
  > .el-input {
  font-size: 12px !important;
  height: 30px !important;
}
::v-deep
  .el-form
  > .el-row
  > .el-col
  > .el-form-item
  > .el-form-item__content
  > .el-autocomplete
  > .el-input {
  font-size: 12px !important;
  height: 30px !important;
}
::v-deep
  .el-form
  > .el-form-item
  > .el-form-item__content
  > .el-autocomplete
  > .el-input {
  font-size: 12px !important;
  height: 30px !important;
}
::v-deep .el-form > .el-form-item > .el-form-item__content > .el-textarea {
  font-size: 12px !important;
}
::v-deep
  .el-form
  > .el-row
  > .el-form-item
  > .el-form-item__content
  > .el-textarea {
  font-size: 12px !important;
}
::v-deep
  .el-form
  > .el-row
  > .el-col
  > .el-form-item
  > .el-form-item__content
  > .el-textarea {
  font-size: 12px !important;
}
::v-deep
  .el-form
  > .el-form-item
  > .el-form-item__content
  > .el-input
  > .el-input__inner {
  height: 30px !important;
}
::v-deep
  .el-form
  > .el-row
  > .el-form-item
  > .el-form-item__content
  > .el-autocomplete
  > .el-input
  > .el-input__inner {
  height: 30px !important;
}
::v-deep
  .el-form
  > .el-row
  > .el-col
  > .el-form-item
  > .el-form-item__content
  > .el-autocomplete
  > .el-input
  > .el-input__inner {
  height: 30px !important;
}
::v-deep
  .el-form
  > .el-form-item
  > .el-form-item__content
  > .el-autocomplete
  > .el-input
  > .el-input__inner {
  height: 30px !important;
}
::v-deep
  .el-form
  > .el-row
  > .el-form-item
  > .el-form-item__content
  > .el-input
  > .el-input__inner {
  height: 30px !important;
}
::v-deep
  .el-form
  > .el-row
  > .el-col
  > .el-form-item
  > .el-form-item__content
  > .el-input
  > .el-input__inner {
  height: 30px !important;
}
::v-deep
  .el-form
  > .el-form-item
  > .el-form-item__content
  > .el-select
  > .el-input {
  font-size: 12px !important;
  height: 30px !important;
}
::v-deep
  .el-form
  > .el-form-item
  > .el-form-item__content
  > .el-select
  > .el-input
  > .el-input__inner {
  height: 30px !important;
}
::v-deep
  .el-form
  > .el-row
  > .el-form-item
  > .el-form-item__content
  > .el-input
  > .el-input__inner {
  height: 30px !important;
}
::v-deep
  .el-form
  > .el-row
  > .el-col
  > .el-form-item
  > .el-form-item__content
  > .el-input
  > .el-input__inner {
  height: 30px !important;
}
::v-deep
  .el-form
  > .el-row
  > .el-form-item
  > .el-form-item__content
  > .el-select
  > .el-input {
  font-size: 12px !important;
  height: 30px !important;
}
::v-deep
  .el-form
  > .el-row
  > .el-col
  > .el-form-item
  > .el-form-item__content
  > .el-select
  > .el-input {
  font-size: 12px !important;
  height: 30px !important;
}
::v-deep
  .el-form
  > .el-row
  > .el-form-item
  > .el-form-item__content
  > .el-select
  > .el-input
  > .el-input__inner {
  height: 30px !important;
}
::v-deep
  .el-form
  > .el-row
  > .el-col
  > .el-form-item
  > .el-form-item__content
  > .el-select
  > .el-input
  > .el-input__inner {
  height: 30px !important;
}
::v-deep
  .el-form
  > .el-row
  > .el-form-item
  > .el-form-item__content
  > .el-select
  > .el-input {
  font-size: 12px !important;
  height: 30px !important;
}
::v-deep
  .el-form
  > .el-row
  > .el-col
  > .el-form-item
  > .el-form-item__content
  > .el-select
  > .el-input {
  font-size: 12px !important;
  height: 30px !important;
}
::v-deep
  .el-form
  > .el-row
  > .el-form-item
  > .el-form-item__content
  > .el-select
  > .el-input
  > .el-input__inner {
  height: 30px !important;
}
::v-deep
  .el-form
  > .el-row
  > .el-col
  > .el-form-item
  > .el-form-item__content
  > .el-select
  > .el-input
  > .el-input__inner {
  height: 30px !important;
}
::v-deep .el-input__suffix .el-input__icon {
  line-height: 30px !important;
}
</style>
